<template>
  <div id = "teamCardList">
  <van-card

      v-for="team in props.teamList "
      :thumb="team.teamAvatarUrl?team.teamAvatarUrl:defaultPicture"
      :desc="team.description"
      :title="`${team.name}`"
      @click-thumb="showTeam(team.id)"

  >
    <template #tags>
      <van-tag plain type="danger"     style="margin-right: 8px ; margin-top: 8px" >
        {{
          teamStatusEnum[team.status]
        }}
      </van-tag>
    </template>
    <template #bottom>
      <div>
        {{ `队伍人数:${team.hasJoinNum}/${team.maxNum}`}}
      </div>
      <div v-if="team.expireTime">
        {{ '过期时间: ' + team.expireTime }}
      </div>

    </template>


    <template #footer>
<!--加入队伍： 仅非队伍创建人、且未加入队伍的人可见-->
      <van-button size="small" type="primary"  v-if="team.userId !== currentUser?.id && !team.hasJoin"
                  plain  @click="preJoinTeam(team)"  >加入队伍</van-button>
<!--      更新队伍：仅创建人可见-->
      <van-button v-if="team.userId === currentUser?.id" size="small" plain
                  @click="doUpdateTeam(team.id)">更新队伍
      </van-button>
<!--退出队伍：创建人不可见，仅已加入队伍的人可见-->
      <van-button size="small" v-if="team.userId !== currentUser?.id &&team.hasJoin"
                  plain @click="doQuitTeam(team.id)">退出队伍</van-button>
<!--      解散队伍：仅创建人可见-->
      <van-button v-if="team.userId  === currentUser?.id" size="small" type="danger"
                  plain @click="doDeleteTeam(team.id)">解散队伍</van-button>
    </template>

  </van-card>
  </div>

  <van-dialog v-model:show="showPasswordDialog" title="请输入密码" show-cancel-button   @confirm="doJoinTeam"
              @cancel="doJoinCancel">
    <van-field v-model="password"  placeholder="请输入密码" />

  </van-dialog>


</template>

<script setup lang="ts">
import {defaultPicture} from "../common/userCommon"
import {teamStatusEnum} from "../constants/team";
import {TeamType} from "../models/team";
import {useRouter} from "vue-router";
import myAxios from "../plugins/myAxios";
import {showFailToast, showSuccessToast} from "vant";
import {onMounted, ref} from "vue";
import {getCurrentUser} from "../services/user";

interface TeamCardListProps{
  teamList: TeamType[];
}
const props = withDefaults(defineProps<TeamCardListProps>(), {
  // @ts-ignore
  teamList: [] as TeamType[],
});

const router = useRouter();
const currentUser = ref();
const showPasswordDialog = ref(false);
const password = ref('');
const joinTeamId = ref(0);



onMounted(async () =>{
    currentUser.value = await  getCurrentUser();
})

const doUpdateTeam = (id: number) =>{
  router.push({
    path: '/team/update',
    query: {
      id,
    }
  })
}
const preJoinTeam = (team:TeamType) =>{
  joinTeamId.value = team.id;
  if(team.status === 0){
    doJoinTeam();
  }else{
    showPasswordDialog.value=true;
  }

}

const doJoinCancel =() =>{
  joinTeamId.value = 0;
  password.value = ''

}
/**
 * 展示队伍详情
 * @param id
 */
/*const showTeam =  ( id:number) =>{
  router.push({
    path: '/team/show',
    query: {
      id,
    }
  })

}*/
const showTeam = (id) => {

  router.push({
    name: "teamShow",
    query: {id},
  })
}



/**
 * 加入队伍
 */
const doJoinTeam = async () =>{
  if(!joinTeamId.value){
    return;
  }
  const res = await myAxios.post('/team/join',{
    teamId: joinTeamId.value,
    password: password.value,
  });
  if(res?.code === 0){
    showSuccessToast('加入成功');
    doJoinCancel();
  }else{
    showFailToast('加入失败' + (res.description ? `，${res.description}` : ''));
  }
}

/**
 * 退出队伍
 * @param id
 */
const doQuitTeam = async (id: number) => {


  const res = await myAxios.post('/team/quit', {
    teamId: id
  });

  if (res?.code === 0) {
    showSuccessToast('操作成功');
  } else {
    showFailToast('操作失败' + (res.description ? `，${res.description}` : ''));
  }
}

/**
 * 解散队伍
 * @param id
 */
const doDeleteTeam = async (id: number) => {
  const res = await myAxios.post('/team/delete', {
    id,
  });
  if (res?.code === 0) {
    showSuccessToast('操作成功');
  } else {
    showFailToast('操作失败' + (res.description ? `，${res.description}` : ''));
  }
}

</script>

<style scoped>
#teamCardList :deep(.van-image__img) {
  height: 128px;
  object-fit: unset;
}
</style>